<template>
  <div class="wvuecat">
    <el-container>
      <el-aside width="288px" class="wvuecat-left">
        <!-- @logo105x27 -->
        <div class="wvuecat-logo">
          <el-image src="/Home/logo.png" alt="租车logo" />
        </div>
        <!-- @导航192x40 --> 
        <el-container class="menu">
          <el-row class="tac">
            <el-col :span="6">
              <el-menu default-active="1" class="el-menu-vertical-demo">
                <el-menu-item index="1" @click="navto2()">
                  <el-icon><location /></el-icon>
                  <span>Navigator Three</span>
                </el-menu-item>
                <el-sub-menu index="2" style="width: 192px">
                  <template #title>
                    <el-icon><location /></el-icon>
                    <span>Navigator One</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="2-1" @click="navto()">item one</el-menu-item>
                    <el-menu-item index="2-2">item two</el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>
                <el-sub-menu index="3" style="width: 192px">
                  <template #title>
                    <el-icon><location /></el-icon>
                    <span>Navigator One</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="3-1" @click="navto()">item one</el-menu-item>
                    <el-menu-item index="3-2">item two</el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>
                <el-sub-menu index="4" style="width: 192px">
                  <template #title>
                    <el-icon><location /></el-icon>
                    <span>Navigator One</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="4-1" @click="navto()">item one</el-menu-item>
                    <el-menu-item index="4-2">item two</el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>
                <!-- <el-menu-item @click="navto2()" index="2">
                  <el-icon><icon-menu /></el-icon>
                  <span>Navigator Two</span>
                </el-menu-item>

                <el-menu-item index="3" @click="navto2()">
                  <el-icon><document /></el-icon>
                  <span>Navigator Three</span>
                </el-menu-item>
                <el-menu-item index="4" @click="navto2()">
                  <el-icon><setting /></el-icon>
                  <span>Navigator Four</span>
                </el-menu-item>
                <el-menu-item index="5" @click="navto2()">
                  <el-icon><setting /></el-icon>
                  <span>Navigator Four</span>
                </el-menu-item>
                <el-menu-item index="6" @click="navto2()">
                  <el-icon><setting /></el-icon>
                  <span>Navigator Four</span>
                </el-menu-item>
                <el-menu-item index="7" @click="navto2()">
                  <el-icon><setting /></el-icon>
                  <span>Navigator Four</span>
                </el-menu-item> -->
              </el-menu>
            </el-col>
          </el-row>
        </el-container>
        <!-- @用户头像与主题切换 -->
        <div>
          <el-avatar class="wvuecat-img" :size="52" src="/Home/logo.png">
            <img src="/Home/logo.png" />
          </el-avatar>
        </div>
        <el-button type="primary" class="wvuecat-buttom" />
      </el-aside>
      <!-- @roter展示 -->
      <el-main class="wvuecat-right">
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import Routerperiow from "@/components/nav/navs.vue";
import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";
import { Document, Menu as IconMenu, Location, Setting } from "@element-plus/icons-vue";
const router = useRouter();
const navto = (index) => {
  const rous = ["/", "/appointment", "/advance", "/overtime", "/404"];
  console.log(rous);
  router.push("/404");
};
const navto1 = (index) => {
  const rous = ["/", "/appointment", "/advance", "/overtime", "/404"];
  console.log(rous);
  router.push("/");
};
const navto2 = (index) => {
  const rous = ["/", "/appointment", "/advance", "/overtime", "/404"];
  console.log(rous);
  router.push("/construction");
};
</script>
<style>
.wvuecat-buttom {
  position: absolute;
  bottom: 80px;
  left: 86px;
  background: url(/Home/cavs.png) center center / cover no-repeat;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 0 !important;
  background-color: #fff !important;
}
.wvuecat-img {
  position: absolute;
  bottom: 138px;
  left: 79px;
  border: #2160f9 4px solid;
}
.el-menu-item.is-active {
  color: white !important;
  background-color: #2160f9 !important;
}
.el-menu-item {
  width: 192px;
  height: 40px !important;
  opacity: 1;
  /* gap: 20px; */
  border-radius: 10px;
  display: flex;
  align-items: center;
}
.el-menu {
  width: 192px !important;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  border-right: none !important;
}
/*wvuecat:主体 */
.wvuecat {
  width: 100%;
  height: 100%;
  min-height: 900px;
  min-width: 1450px;
  background-color: #f5f5f5;
}
/*menu:路由导航 */
.menu {
  /* width: 192px; */
  /* height: auto;
  flex-wrap: wrap;
  align-items: center; */
  /* color: #f5f5f5; */
  position: absolute;
  top: 116px;
  left: 48px;
  gap: 20px;
}
/*wvuecat-nav:导航载体 */
.wvuecat-nav {
  width: 192px;
  height: 40px;
  /* opacity: 1; */
  /* border-radius: 10px; */
  /* background: rgba(33, 96, 249, 1); */
  /* display: flex;
  justify-content: flex-start;
  align-items: flex-start; */
  /* padding: 8px 16px 8px 16px; */
  /* position: absolute;
  top: 116px;
  left: 48px; */
}
/*wvuecat-logo:导航logo*/
.wvuecat-logo {
  width: 105px;
  height: 27px;
  display: flex;
  margin: 29px 104px 844px 79px;
  justify-content: center;
  text-align: center;
  background-color: #ffffff;
}
/*wvuecat-left:左侧导航 */
.wvuecat-left {
  position: relative;
  text-align: center;
  width: 288px;
  max-width: 288px;
  min-width: 288px;
  height: 100vh;
  min-height: 900px;
  background-color: #ffffff;
}
/*wvuecat-right:右侧路由展示内容 */
.wvuecat-right {
  width: 100%;
  height: 100vh;
  margin-left: 20px;
  padding: 20px;
}
</style>
